/* ==========================================
   PÁGINA QUEM SOMOS (ABOUT)
========================================== */
.quemSomosPage {
  background-color: #0a0a0a;
}

/* Dobra 1: Hero & Verticais */
.aboutHeroSection {
  position: relative;
  width: 100%;
  padding: 120px 0 200px 0;
  /* Espaço extra embaixo para os cards sobreporem */
}

.aboutHeroBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.aboutHeroBg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aHeroOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.4) 50%, #0a0a0a 100%);
}

.aHeroContent {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.aHeroTitle {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.1;
}

.aHeroSubtitle {
  font-size: 1.2rem;
  color: #cccccc;
  margin-bottom: 40px;
}

.heroVerticalsGrid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-top: 60px;
  /* <-- A MÁGICA 1: Empurra os cards para baixo, descolando do botão */
  margin-bottom: -150px;
  /* <-- A MÁGICA 2: Faz os cards invadirem a seção de baixo elegantemente */
}

.verticalCard {
  position: relative;
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.verticalCard:hover {
  transform: translateY(-10px);
}

.verticalCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vCardOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.verticalCard h4 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  z-index: 2;
}

/* Dobra 2: Stats */
.aboutStatsSection {
  padding: 200px 0 100px 0;
  background: #0a0a0a;
}

.statsGridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.statsLeft h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 40px;
}

.statsNumbersGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.statBlock {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.3s ease;
}

.statBlock:hover {
  border-color: var(--accent-cyan);
}

.statNumber {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 10px;
}

.statLabel {
  color: #b3b3b3;
  font-size: 0.95rem;
}

.statsRight .aboutTextIntro {
  font-size: 1.1rem;
  color: #cccccc;
  line-height: 1.8;
  margin-bottom: 40px;
}

.aboutCollage {
  display: flex;
  gap: 20px;
}

.aboutCollage img {
  border-radius: 12px;
  object-fit: cover;
  width: 50%;
  height: 250px;
}

.collageImg1 {
  margin-top: 30px;
}

/* Dobra 3: Diferenciais */
.aboutDiffSection {
  padding: 100px 0;
  background: #050505;
}

.diffHeader {
  text-align: center;
  margin-bottom: 60px;
}

.diffHeader h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 15px;
}

.diffHeader p {
  color: #b3b3b3;
  font-size: 1.1rem;
}

.diffCardsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.diffCard {
  background: #111;
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.diffIcon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px auto;
  background: rgba(3, 250, 213, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diffIcon svg {
  width: 30px;
  height: 30px;
}

.diffCard h3 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.diffCard p {
  color: #888;
  font-size: 0.95rem;
  line-height: 1.6;
}

.diffCtaWrapper {
  text-align: center;
}

/* Dobra 4: Liderança */
.aboutLeadersSection {
  padding: 100px 0;
  background: #0a0a0a;
}

.leadersHeader {
  max-width: 700px;
  margin-bottom: 60px;
}

.leadersHeader h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 15px;
}

.leadersHeader p {
  color: #b3b3b3;
  font-size: 1.1rem;
  line-height: 1.6;
}

.leadersGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.leaderCard {
  display: flex;
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.leaderImage {
  width: 40%;
}

.leaderImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderInfo {
  width: 60%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.leaderInfo h3 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.leaderRole {
  color: var(--accent-cyan);
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
}

.leaderInfo p {
  color: #b3b3b3;
  line-height: 1.6;
}

/* Dobra 5: Chancelas */
.aboutChancelaSection {
  padding: 100px 0 150px 0;
  background: #050505;
}

.chancelaHeaderGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}

.cHLeft h2 {
  font-size: 2.5rem;
  color: #fff;
}

.cHRight p {
  color: #b3b3b3;
  font-size: 1.1rem;
  line-height: 1.6;
}

.chancelaCardsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ==========================================
   NOVOS CARTÕES COM ÍCONES E EFEITO LAVA (V2.0)
========================================== */
.cIconCard {
  background-color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  height: 320px; 
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-color 1.5s ease;
  position: relative;
  overflow: hidden; 
}

/* O Ícone e a sua caixinha ciano */
.cIconWrapper {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 56px;
  height: 56px;
  background-color: #03FAD5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3; /* Fica acima da Lava */
}

.cIconWrapper svg {
  width: 28px;
  height: 28px;
}

/* O Texto do Cartão */
.cIconCard h4 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  position: relative;
  z-index: 3; /* Fica acima da Lava */
}

/* ==========================================
   AS BOLHAS DE LAVA (CSS PURO)
========================================== */
/* BOLHA 1 (Verde Água - Nasce no Topo Esquerda) */
.cIconCard::before {
  content: '';
  position: absolute;
  width: 150px; height: 150px;
  background: linear-gradient(135deg, #06C5A9, #018E7A);
  filter: blur(25px); 
  opacity: 0;
  z-index: 1; 
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
  animation: lavaWobble1 10s infinite alternate ease-in-out;
}

/* BOLHA 2 (Ciano Brilhante - Nasce no Fundo Direita) */
.cIconCard::after {
  content: '';
  position: absolute;
  width: 170px; height: 170px;
  background: linear-gradient(135deg, #03FAD5, #06C5A9);
  filter: blur(30px);
  opacity: 0;
  z-index: 1; 
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
  animation: lavaWobble2 12s infinite alternate ease-in-out;
}

/* ESTADO ATIVO (LIGA O DIMMER DAS LUZES) */
.cIconCard:hover, 
.cIconCard.is-active-lava {
  transform: translateY(-8px);
  border-color: rgba(3, 250, 213, 0.3); 
}

.cIconCard:hover::before,
.cIconCard.is-active-lava::before {
  opacity: 0.5; 
}

.cIconCard:hover::after,
.cIconCard.is-active-lava::after {
  opacity: 0.4; 
}

/* ==========================================
   COREOGRAFIAS ORGÂNICAS (Morphing & Movimento)
========================================== */
@keyframes lavaWobble1 {
  0% {
    top: -10%; left: -10%;
    transform: scale(1) rotate(0deg);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  50% {
    top: 30%; left: 50%;
    transform: scale(1.3) rotate(180deg);
    border-radius: 70% 30% 50% 50% / 30% 40% 70% 60%;
  }
  100% {
    top: 60%; left: 10%;
    transform: scale(0.9) rotate(360deg);
    border-radius: 30% 70% 40% 60% / 60% 30% 50% 40%;
  }
}

@keyframes lavaWobble2 {
  0% {
    bottom: -10%; right: -10%;
    transform: scale(1) rotate(0deg);
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  }
  50% {
    bottom: 40%; right: 60%;
    transform: scale(1.2) rotate(-180deg);
    border-radius: 40% 60% 70% 30% / 60% 30% 50% 40%;
  }
  100% {
    bottom: 70%; right: -10%;
    transform: scale(0.8) rotate(-360deg);
    border-radius: 50% 50% 30% 70% / 30% 70% 40% 60%;
  }
}

/* ==========================================
   ANIMAÇÕES DE SCROLL (ENTRADA E SAÍDA SMOOTH)
========================================== */
/* Estado inicial: invisível e empurrado 40px para baixo */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Estado final: 100% visível e na posição original */
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================
   AJUSTES RESPONSIVOS: PÁGINA QUEM SOMOS (CELULARES)
======================================================== */
@media (max-width: 768px) {
    
    /* --- 1. HERO & VERTICAIS --- */
    .aboutHeroSection {
        padding: 120px 20px 60px 20px; /* Reduz o respiro e protege as laterais */
    }
    
    .aHeroTitle {
        font-size: 2.2rem; /* Reduz de 3.5rem para não quebrar muitas linhas */
        margin-bottom: 15px;
    }

    .aHeroSubtitle {
        font-size: 1rem;
    }

    .heroVerticalsGrid {
        grid-template-columns: 1fr; /* Empilha os 5 cartões de serviço */
        margin-top: 40px;
        margin-bottom: 0; /* DESLIGA a mágica da margem negativa no mobile */
        gap: 15px;
    }

    .verticalCard {
        height: 220px; /* Deixa os cartões mais achatados e elegantes na telinha */
    }

    /* --- 2. ESTATÍSTICAS E HISTÓRIA --- */
    .aboutStatsSection {
        padding: 60px 20px;
    }

    .statsGridContainer {
        grid-template-columns: 1fr; /* Empilha o bloco de números com o texto */
        gap: 40px;
    }

    .statsLeft h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .statsNumbersGrid {
        grid-template-columns: 1fr 1fr; /* Mantém 2 colunas lado a lado para os números (fica chique) */
        gap: 15px;
    }

    .statBlock {
        padding: 20px 10px; /* Ajuste para caber os textos menores */
    }

    .statNumber {
        font-size: 2rem;
    }

    .aboutCollage {
        flex-direction: column; /* Empilha as fotos da colagem */
        gap: 15px;
    }

    .aboutCollage img {
        width: 100%; 
        height: 200px;
    }

    .collageImg1 {
        margin-top: 0; /* Remove a escadinha (assimetria) do desktop */
    }

    /* --- 3. DIFERENCIAIS --- */
    .aboutDiffSection {
        padding: 60px 20px;
    }

    .diffHeader h2 {
        font-size: 2rem;
    }

    .diffCardsGrid {
        grid-template-columns: 1fr; /* Empilha as 4 colunas de diferenciais */
    }

    /* --- 4. LIDERANÇA (SÓCIOS) --- */
    .aboutLeadersSection {
        padding: 60px 20px;
    }

    .leadersHeader h2 {
        font-size: 2rem;
    }

    .leadersGrid {
        grid-template-columns: 1fr; /* Empilha os cartões de líderes */
        gap: 30px;
    }

    .leaderCard {
        flex-direction: column; /* Coloca a foto em cima do texto */
    }

    .leaderImage {
        width: 100%;
        height: 350px;
    }

    .leaderInfo {
        width: 100%;
        padding: 30px 20px; 
    }

    .leaderInfo h3 {
        font-size: 1.6rem;
    }

    /* --- 5. CHANCELAS --- */
    .aboutChancelaSection {
        padding: 60px 20px 80px 20px;
    }

    .chancelaHeaderGrid {
        grid-template-columns: 1fr; /* Empilha título e descrição */
        gap: 20px;
        text-align: center;
        margin-bottom: 40px;
    }

    .cHLeft h2 {
        font-size: 2rem;
    }

    .chancelaCardsGrid {
        grid-template-columns: 1fr; /* Empilha os 4 cartões gigantes */
    }

    .cIconCard {
        height: 260px; /* Reduz a altura da caixa de texto para caber bonito na tela */
    }
}